<template>
	<view class="shop_menu">
		<view class="shop_menu_item" :class="index == current ?'active':''" v-for="(item, index) in menu" :key="index"
			@click="change(index)">
			<view class="shop_menu_item_icon">
				<rui-icons :icon="item.icon" size="50" :color="index == current ?'#fff':''"></rui-icons>
			</view>
			<view class="shop_menu_item_name">
				{{item.name}}
			</view>
		</view>

	</view>
	<view class="shop_list">
		<view class="shop_list_item" v-for="index in 15" :key="index">
			<view class="shop_list_item_tag">
				特价
			</view>
			<view class="shop_list_item_detail">
				<image src="/static/images/img.jpeg" class="shop_list_item_detail_img" mode=""></image>

				<view class="shop_list_item_detail_info">
					<view class="shop_list_item_detail_info_title">
						冻鸡脚
					</view>
					<view class="shop_list_item_detail_info_desc">
						可做卤鸡脚，泡脚鸡脚，红烧鸡脚等。
					</view>
					<view class="shop_list_item_detail_info_botton" @click="to">
						<view class="shop_list_item_detail_info_botton_price">26.8</view>
						<view class="shop_list_item_detail_info_botton_btn">
							加入购物车
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<rui-popup ref="refPopup">
		<rui-shop-sku></rui-shop-sku>
	</rui-popup>
</template>

<script setup>
	import {
		ref
	} from "vue"
	let refPopup = ref();
	let current = ref(0)

	const menu = [{
			name: "冷冻商品",
			icon: "freeze"
		},
		{
			name: "干杂食品",
			icon: "chili"
		},
		{
			name: "调味食品",
			icon: "season"
		},
	]

	const change = (i) => {
		current.value = i
	}
	const to = () => {
		refPopup.value.open()
	}
</script>

<style lang="scss" scoped>
	.shop {
		&_menu {
			background: #fff;
			position: fixed;
			top: 205rpx;
			left: 0;
			box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, .06);
			z-index: 99;
			height: calc(100% - 160rpx);

			.active {
				background: var(--color);
				color: #fff;
			}

			&_item {
				padding: 30rpx 20rpx;
				font-size: 24rpx;
				text-align: center;
			

				&_name {
					margin-top: 5rpx;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}

		&_list {
			&_item {
				margin: 20rpx 0 20rpx 155rpx;
				background: #fff;
				box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, .06);
				position: relative;
	
				&_tag{
					background: #f00;
					font-size: 24rpx;
					display: unset;
					color: #fff;
					padding: 2rpx 10rpx;
					position: absolute;
					top: 0;
					left: 0;
					border-bottom-right-radius: 10rpx;
					z-index: 9;
				}
				
				&_detail {
					display: flex;
					align-items: center;
					position: relative;
					padding: 30rpx;

					&_img {
						width: 200rpx;
						height: 150rpx;
						margin-right: 30rpx;
					}

					&_info {
						width: calc(100% - 200rpx);

						&_title {
							font-size: 36rpx;
							font-weight: bold;
						}

						&_desc {
							font-size: 22rpx;
							color: #999;
						}

						&_botton {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 10rpx;

							&_price {
								font-size: 36rpx;

								&::before {
									content: "￥";
									font-size: 24rpx;
									font-weight: normal;
								}
							}

							&_btn {
								background: var(--color);
								color: #fff;
								padding: 8rpx 20rpx;
								font-size: 24rpx;
								border-radius: 30rpx;
							}
						}


					}
				}
			}

		}
	}
</style>